import React, { useState } from 'react'
import { Radio, InputNumber, Row, Col, Select, List, Checkbox, message } from 'antd'
import { isNumber } from '../common/isNumber'
const { Group } = Radio

export default function Week(props: any) {
  const [weekOptions, setweekOptions] = useState([
    {
      label: '星期日',
      value: '7',
    },
    {
      label: '星期一',
      value: '1',
    },
    {
      label: '星期二',
      value: '2',
    },
    {
      label: '星期三',
      value: '3',
    },
    {
      label: '星期四',
      value: '4',
    },
    {
      label: '星期五',
      value: '5',
    },
    {
      label: '星期六',
      value: '6',
    },
  ])
  function changeParams(type: string, value: string) {
    const state = { ...props.week }
    state[type] = value
    // if (type === 'start') {
    //     if (state.end - state.start <= 1) {
    //         state.end = value + 1;
    //     }
    // }
    // if (type === 'end') {
    //     if (state.end - state.start <= 1) {
    //         state.start = value - 1;
    //     }
    // }
    props.onchange(state)
  }
  function getWeekOptions() {
    return weekOptions.map((item: any, index: number) => {
      return (
        <Select.Option value={item.value} key={`${item.label}-${index}`}>
          {item.label}
        </Select.Option>
      )
    })
  }
  const {
    week: { type, start, end, some, begin, beginEvery, last },
  } = props
  return (
    <div>
      <Group
        value={type}
        onChange={(e) => {
          const state = { ...props.week }
          // if (e.target.value === "some") {
          //     state.some = ["1"];
          // }
          state.type = e.target.value
          props.onchange(state)
        }}
        style={{ width: "100%" }}
      >
        <List size="small" bordered>
          <List.Item>
            <Radio value="*">每周</Radio>
          </List.Item>
          <List.Item>
            <Radio value="?">不指定</Radio>
          </List.Item>
          <List.Item style={{ marginBottom: 5 }}>
            <Radio value="period">周期</Radio>从{' '}
            <Select
              style={{ width: 80 }}
              placeholder="周"
              size="small"
              value={start}
              onChange={(value) => {
                changeParams('start', value)
              }}
              disabled={type !== 'period'}
            >
              {getWeekOptions()}
            </Select>{' '}
            到{' '}
            <Select
              style={{ width: 80 }}
              placeholder="周"
              value={end}
              size="small"
              onChange={(value) => {
                changeParams('end', value)
              }}
              disabled={type !== 'period'}
            >
              {getWeekOptions()}
            </Select>
          </List.Item>
          <List.Item>
            <Radio value="beginInterval"></Radio>第{' '}
            <InputNumber
              min={1}
              max={4}
              placeholder="周"
              size="small"
              value={begin}
              formatter={(value) => value.toString().replace(/[^\d\.]/g, '')}
              onChange={(value) => {
                if (isNumber(value) && Number(value) >= 1 && Number(value) <= 4) {
                  changeParams('begin', value)
                } else {
                  message.info('输入不合法')
                }
              }}
              disabled={type !== 'beginInterval'}
            />{' '}
            周的{' '}
            <Select
              style={{ width: 80 }}
              defaultValue={'1'}
              placeholder="星期"
              value={beginEvery}
              size="small"
              onChange={(value) => {
                changeParams('beginEvery', value)
              }}
              disabled={type !== 'beginInterval'}
            >
              {getWeekOptions()}
            </Select>
          </List.Item>
          <List.Item style={{ marginBottom: 5 }}>
            <Radio value="last"></Radio>
            本月最后一个
            <Select
              style={{ width: 80 }}
              placeholder="星期"
              size="small"
              value={last}
              onChange={(value) => {
                changeParams('last', value)
              }}
              disabled={type !== 'last'}
            >
              {getWeekOptions()}
            </Select>
          </List.Item>
          <List.Item>
            <Radio value="some">具体星期数（可多选）</Radio>
            <Select
              style={{ width: 'auto' }}
              mode="multiple"
              placeholder="星期数"
              size="small"
              value={some}
              showArrow
              onChange={(value) => {
                if (value.length < 1) {
                  return message.warn('至少选择一项')
                }
                changeParams('some', value)
              }}
              disabled={type !== 'some'}
            >
              {getWeekOptions()}
            </Select>
            {/* <Checkbox.Group
                                value={some}
                                defaultValue="1"
                                onChange={value => {
                                    changeParams("some", value);
                                }}
                                options={weekOptions}
                                disabled={type !== "some"}
                            /> */}
          </List.Item>
        </List>
      </Group>
    </div>
  )
}
